<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=2.0 user-scalable=yes"/>
    <title>我的主页</title>
    <link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.css">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="datatables/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="datatables/css/select.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="datatables/css/bootstrap-editable.css">

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .container {
            padding: 10px 0;
        }

        .table-action {
            text-align: center;
        }

        .point {
            cursor: pointer;
        }

    </style>

</head>
<body>

<div class="container">

    <div class="row">
        <div class="table-responsive" style="width: 100%; overflow:hidden;">
            <table id="example" class="table table-striped table-bordered" cellspacing="0">
            </table>
        </div>
    </div>

</div>
</body>
<script type="text/javascript" src="datatables/js/jquery.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="datatables/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="datatables/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="datatables/js/dataTables.select.js"></script>
<script type="text/javascript" src="datatables/js/bootstrap-editable.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="customer/js/my.datatables.local.js"></script>
<script type="text/javascript" src="form/jquery.form.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        var tools = '<div class="btn-group">\
            <a href="add.html" class="btn btn-default fa fa-plus-square-o">&nbsp;新增(form)</a>\
            <a href="add-ajax.html" class="btn btn-default fa fa-plus-square-o">&nbsp;新增(ajax)</a>\
            <a class="btn btn-default fa fa-minus-square-o auth oper-delete">&nbsp;删除</a>\
        </div>';

        // 列配置
        var columns =
                [
                    {
                        data: 'id', title: '操作', className: 'table-action', width: 50, orderable: false,
                        render: function (data, type, row, meta) {
//                            console.log(data);
//                            console.log(type);
//                            console.log(row);
//                            console.log(meta);

                            var result = '\
                                <span class="fa fa-edit point" title="更新" onclick="layer.msg(' + row.id + ')"></span>\
                            ';
                            return result;
                        }
                    },
                    {data: 'name', title: '姓名', editable: true},
                    {data: 'age', title: '年龄', orderable: false}
                ];

        var grid = $('#example').DGrid({
            gridName: 'example', // 给 grid起个名
            removeUrl: 'datatables/remove', // 配置删除路径
            tools: tools, // 操作按钮组
            // dataTable(options)，使用以下定义覆盖 options中的值
            gridOptions: {
                columns: columns
            },
            ajax: {
                url: 'datatables/all'
            }
        });

    });

</script>
</html>